<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/LCalendar.css" />
    <script src="./js/LCalendar.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <script src="./js/flexible.js"></script>
    <link rel="stylesheet" href="./css/calendar.css" />
  </head>
  <body>
    <!-- 头部 -->
    <div class="header">
      <div class="content">
        <a href="#"><img src="./images/btn_nav_back.png" alt="" /></a>
        <span>任务数据</span>
      </div>
    </div>

    <!-- 日历头部 -->
    <div class="calendar_top">
      <div class="font">
        <img src="./images/btn_date_xiayue(1).png" alt="" class="img1" />
        <div>
          <input id="demo4" type="text" readonly="" placeholder="2020-02" />
        </div>
        <img src="./images/btn_date_xiayue.png" alt="" class="img2" />
      </div>
    </div>

    <!-- 任务量 -->
    <div class="tasks">
      <div class="assignments">
        <div id="total">
          <p>18</p>
          <div class="a">任务总量</div>
        </div>
        <div id="complete">
          <p>16</p>
          <div class="a">完成任务量</div>
        </div>
        <div id="mileage">
          <p>3987</p>
          <div class="a">运输里程(km)</div>
        </div>
      </div>
    </div>

    <!-- 日历 -->
    <div class="calendar">
      <div class="one">
        <p>周一</p>
        <p>周二</p>
        <p>周三</p>
        <p>周四</p>
        <p>周五</p>
        <p>周六</p>
        <p>周日</p>
      </div>
      <div class="two">
        <span>26</span>
        <span>27</span>
        <span>28</span>
        <span>29</span>
        <span>30</span>
        <span>31</span>
        <p>1</p>
      </div>
      <div class="three">
        <p>2</p>
        <p>3</p>
        <div class="num">
          <div>272</div>
          <span>4</span>
        </div>
        <div class="num">
          <div>128</div>
          <span>5</span>
        </div>
        <div class="num">
          <div>177</div>
          <span>6</span>
        </div>
        <div class="num">
          <div>272</div>
          <span>7</span>
        </div>
        <p>8</p>
      </div>
      <div class="three">
        <p>9</p>
        <p>10</p>
        <div class="num">
          <div>143</div>
          <span>11</span>
        </div>
        <div class="num">
          <div>187</div>
          <span>12</span>
        </div>
        <div class="num">
          <div>217</div>
          <span>13</span>
        </div>
        <div class="num">
          <div>187</div>
          <span>14</span>
        </div>
        <p>15</p>
      </div>
      <div class="two">
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
      </div>
      <div class="two">
        <p>今</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
        <p>28</p>
        <p>29</p>
      </div>
    </div>

    <script src="./js/calendar.js"></script>
  </body>
</html>
